/* 获取直属子元素 */
function getChildren(el, className) {
    for (let item of el.children) if (item.className === className) return item;
    return null;
}

// 自定义短标签解析
// document.addEventListener('DOMContentLoaded', () => {
    customElements.define(
        'fzy-mtitle',
        class FzyMtitle extends HTMLElement {
            constructor() {
                super();
                this.innerHTML = `
            <span class="fzy_mtitle">
                <span class="fzy_mtitle__text">
                    ${this.getAttribute('title') || '默认标题'}
                </span>
            </span>
        `;
            }
        }
    );

    customElements.define(
        'fzy-mp3',
        class FzyMp3 extends HTMLElement {
            constructor() {
                super();
                this.options = {
                    name: this.getAttribute('name'),
                    url: this.getAttribute('url'),
                    theme: this.getAttribute('theme') || '#1989fa',
                    cover: this.getAttribute('cover'),
                    autoplay: this.getAttribute('autoplay') ? true : false
                };
                this.render();
            }

            render() {
                if (!this.options.url) return (this.innerHTML = '音频地址未填写！');
                this.innerHTML = '<span style="display: block" class="fzy_audio_content"></span>';
                if(typeof APlayer !=='undefined') {
                    new APlayer({
                        container: getChildren(this, 'fzy_audio_content'),
                        theme: this.options.theme,
                        loop: 'none',
                        volume: 1,
                        autoplay: this.options.autoplay,
                        audio: [
                            {
                                url: this.options.url,
                                name: this.options.name,
                                cover: this.options.cover
                            }
                        ]
                    });
                }else{
                    this.innerHTML = '未引入APlayer插件或引入出错';
                }
            }
        }
    );

    customElements.define(
        'fzy-music',
        class FzyMusic extends HTMLElement {
            constructor() {
                super();
                this.options = {
                    id: this.getAttribute('id'),
                    color: this.getAttribute('color') || '#1989fa',
                    autoplay: this.getAttribute('autoplay') ? true : false
                };
                this.render();
            }

            render() {
                if (!this.options.id) return (this.innerHTML = '网易云歌曲ID未填写！');
                this.innerHTML = '<span style="display: block" class="fzy_audio_content"></span>';
                try {
                    fetch('http://api.fengzhiya.cn/music/getsong?id=' + this.options.id).then(async response => {
                        const audio = await response.json();
                        if (typeof APlayer !== 'undefined') {
                            new APlayer({
                                container: getChildren(this, 'fzy_audio_content'),
                                lrcType: 1,
                                theme: this.options.color,
                                autoplay: this.options.autoplay,
                                audio
                            });
                        } else {
                            this.innerHTML = '未引入APlayer插件或引入出错';
                        }
                    }).catch(error => {
                        console.error(error);
                    });
                }catch(error) {
                    console.error(error);
                }
            }
        }
    );

    customElements.define(
        'fzy-mlist',
        class FzyMlist extends HTMLElement {
            constructor() {
                super();
                this.options = {
                    id: this.getAttribute('id'),
                    color: this.getAttribute('color') || '#1989fa',
                    autoplay: this.getAttribute('autoplay') ? true : false
                };
                this.render();
            }

            render() {
                if (!this.options.id) return (this.innerHTML = '网易云歌单ID未填写！');
                this.innerHTML = '<span style="display: block" class="fzy_audio_content"></span>';
                fetch('http://api.fengzhiya.cn/music/index?server=netease&type=playlist&id=' + this.options.id, {
                    method: 'post',
                    headers: {
                        'Content-Type': 'application/json'
                    }
                }).then(async response => {
                    const audio = await response.json();
                    if(typeof APlayer !=='undefined') {
                        new APlayer({
                            container: getChildren(this, 'fzy_audio_content'),
                            lrcType: 3,
                            narrow: false,
                            theme: this.options.color,
                            autoplay: this.options.autoplay,
                            audio
                        });
                    }else{
                        this.innerHTML = '未引入APlayer插件或引入出错';
                    }
                });
            }
        }
    );

    customElements.define(
        'fzy-abtn',
        class FzyAbtn extends HTMLElement {
            constructor() {
                super();
                this.options = {
                    icon: this.getAttribute('icon') || '',
                    color: this.getAttribute('color') || '#ff6800',
                    href: this.getAttribute('href') ? this.getAttribute('href') : 'javascript:;',
                    radius: this.getAttribute('radius') || '17.5px',
                    content: this.getAttribute('content') || '多彩按钮'
                };
                this.innerHTML = `
                <a class="fzy_abtn" style="background: ${this.options.color}; border-radius: ${this.options.radius}" href="${this.options.href}" target="_self" rel="noopener noreferrer nofollow">
                    <span class="fzy_abtn__icon">
                        <i class="${this.options.icon}"></i>
                    </span>
                    <span class="fzy_abtn__content">
                        ${this.options.content}
                    </span>
                </a>
            `;
            }
        }
    );

    customElements.define(
        'fzy-anote',
        class FzyAnote extends HTMLElement {
            constructor() {
                super();
                this.options = {
                    icon: this.getAttribute('icon') || 'fa-download',
                    href: this.getAttribute('href') || '#',
                    type: /^secondary$|^success$|^warning$|^error$|^info$/.test(this.getAttribute('type')) ? this.getAttribute('type') : 'secondary',
                    content: this.getAttribute('content') || '标签按钮'
                };
                this.innerHTML = `
                <a class="fzy_anote ${this.options.type}" href="${this.options.href}" target="_self" rel="noopener noreferrer nofollow">
                    <span class="fzy_anote__icon">
                        <i class="fa ${this.options.icon}"></i>
                    </span>
                    <span class="fzy_anote__content">
                        ${this.options.content}
                    </span>
                </a>
            `;
            }
        }
    );

    customElements.define(
        'fzy-dotted',
        class FzyDotted extends HTMLElement {
            constructor() {
                super();
                this.startColor = this.getAttribute('startColor') || '#ff6c6c';
                this.endColor = this.getAttribute('endColor') || '#1989fa';
                this.innerHTML = `
                <span class="fzy_dotted" style="background-image: repeating-linear-gradient(-45deg, ${this.startColor} 0, ${this.startColor} 20%, transparent 0, transparent 25%, ${this.endColor} 0, ${this.endColor} 45%, transparent 0, transparent 50%)"></span>
            `;
            }
        }
    );

    customElements.define(
        'fzy-cloud',
        class FzyCloud extends HTMLElement {
            constructor() {
                super();
                this.options = {
                    type: this.getAttribute('type') || 'default',
                    title: this.getAttribute('title') || '默认标题',
                    url: this.getAttribute('url'),
                    password: this.getAttribute('password')
                };
                const type = {
                    default: '默认网盘',
                    360: '360网盘',
                    bd: '百度网盘',
                    ty: '天翼网盘',
                    ct: '城通网盘',
                    wy: '微云网盘',
                    github: 'Github仓库',
                    lz: '蓝奏云网盘',
                    al: '阿里云盘',
                    gitee:'Gitee仓库',
                    123:'123网盘',
                    kk:'夸克网盘',
                };
                this.innerHTML = `
                <span class="fzy_cloud">
                    <div class="fzy_cloud__logo _${this.options.type}"></div>
                    <div class="fzy_cloud__describe">
                        <div class="fzy_cloud__describe-title">${this.options.title}</div>
                        <div class="fzy_cloud__describe-type">来源：${type[this.options.type] || '默认网盘'}${this.options.password ? ' | 提取码：' + this.options.password : ''}</div>
                    </div>
                    <a class="fzy_cloud__btn" href="${this.options.url}" target="_blank" rel="noopener noreferrer nofollow">
                        <i class="pi pi-download"></i>
                    </a>
                </span>
            `;
            }
        }
    );

    customElements.define(
        'fzy-hide',
        class FzyHide extends HTMLElement {
            constructor() {
                super();
                this.render();
            }

            render() {
                this.innerHTML = '<span class="fzy_hide">此处内容作者设置了 <i class="fzy_hide__button">回复</i> 可见</span>';
                this.$button = this.querySelector('.fzy_hide__button');
                const $comment = document.querySelector('.fzy_comment');
                const $header = document.querySelector('.fzy_header');
                if (!$comment || !$header) return;
                this.$button.addEventListener('click', () => {
                    const top = $comment.offsetTop - $header.offsetHeight - 15;
                    window.scrollTo({top, behavior: 'smooth'});
                });
            }
        }
    );

    customElements.define(
        'fzy-card-default',
        class FzyCardDefault extends HTMLElement {
            constructor() {
                super();
                const _temp = getChildren(this, '_temp');
                this.options = {
                    width: this.getAttribute('width') || '100%',
                    label: this.getAttribute('label') || '卡片标题',
                    content: _temp.innerHTML.trim().replace(/^(<br>)|(<br>)$/g, '') || '卡片内容'
                };
                const htmlStr = `
            <div class="fzy_card__default" style="width: ${this.options.width}">
                <div class="fzy_card__default-title">${this.options.label}</div>
                <div class="fzy_card__default-content">${this.options.content}</div>
            </div>
        `;
                if (getChildren(this, '_content')) {
                    getChildren(this, '_content').innerHTML = htmlStr;
                } else {
                    const span = document.createElement('span');
                    span.style.display = 'block';
                    span.className = '_content';
                    span.innerHTML = htmlStr;
                    this.appendChild(span);
                }
            }
        }
    );

    customElements.define(
        'fzy-message',
        class FzyMessage extends HTMLElement {
            constructor() {
                super();
                this.options = {
                    type: /^success$|^info$|^warning$|^error$/.test(this.getAttribute('type')) ? this.getAttribute('type') : 'info',
                    content: this.getAttribute('content') || '消息内容'
                };
                this.innerHTML = `
                <span class="fzy_message ${this.options.type}">
                    <span class="fzy_message__icon"></span>
                    <span class="fzy_message__content">${this.options.content}</span>
                </span>
            `;
            }
        }
    );

    customElements.define(
        'fzy-progress',
        class FzyProgress extends HTMLElement {
            constructor() {
                super();
                this.options = {
                    percentage: /^\d{1,3}%$/.test(this.getAttribute('percentage')) ? this.getAttribute('percentage') : '50%',
                    color: this.getAttribute('color') || '#ff6c6c'
                };
                this.innerHTML = `
            <span class="fzy_progress">
                <div class="fzy_progress__strip">
                    <div class="fzy_progress__strip-percent" style="width: ${this.options.percentage}; background: ${this.options.color};"></div>
                </div>
                <div class="fzy_progress__percentage">${this.options.percentage}</div>
            </span>
        `;
            }
        }
    );

    customElements.define(
        'fzy-callout',
        class FzyCallout extends HTMLElement {
            constructor() {
                super();
                const _temp = getChildren(this, '_temp');
                this.options = {
                    color: this.getAttribute('color') || '#f0ad4e',
                    content: _temp.innerHTML.trim().replace(/^(<br>)|(<br>)$/g, '') || '标注内容'
                };
                const htmlStr = `
                <div class="fzy_callout" style="border-left-color: ${this.options.color};">
                    ${this.options.content}
                </div>
            `;
                if (getChildren(this, '_content')) {
                    getChildren(this, '_content').innerHTML = htmlStr;
                } else {
                    const span = document.createElement('span');
                    span.style.display = 'block';
                    span.className = '_content';
                    span.innerHTML = htmlStr;
                    this.appendChild(span);
                }
            }
        }
    );

    customElements.define(
        'fzy-card-describe',
        class FzyCardDescribe extends HTMLElement {
            constructor() {
                super();
                const _temp = getChildren(this, '_temp');
                this.options = {
                    title: this.getAttribute('title') || '卡片描述',
                    content: _temp.innerHTML.trim().replace(/^(<br>)|(<br>)$/g, '') || '卡片内容'
                };
                const htmlStr = `
                <div class="fzy_card__describe">
                    <div class="fzy_card__describe-title">${this.options.title}</div>
                    <div class="fzy_card__describe-content">${this.options.content}</div>
                </div>
            `;
                if (getChildren(this, '_content')) {
                    getChildren(this, '_content').innerHTML = htmlStr;
                } else {
                    const span = document.createElement('span');
                    span.style.display = 'block';
                    span.className = '_content';
                    span.innerHTML = htmlStr;
                    this.appendChild(span);
                }
            }
        }
    );

    customElements.define(
        'fzy-card-list',
        class FzyCardList extends HTMLElement {
            constructor() {
                super();
                const _temp = getChildren(this, '_temp');
                let _innerHTML = _temp.innerHTML.trim().replace(/^(<br>)|(<br>)$/g, '');
                let content = '';
                _innerHTML.replace(/{card-list-item}([\s\S]*?){\/card-list-item}/g, function ($0, $1) {
                    content += `<div class="fzy_card__list-item">${$1.trim().replace(/^(<br>)|(<br>)$/g, '')}</div>`;
                });
                let htmlStr = `<div class="fzy_card__list">${content}</div>`;
                if (getChildren(this, '_content')) {
                    getChildren(this, '_content').innerHTML = htmlStr;
                } else {
                    const span = document.createElement('span');
                    span.className = '_content';
                    span.style.display = 'block';
                    span.innerHTML = htmlStr;
                    this.appendChild(span);
                }
            }
        }
    );

    customElements.define(
        'fzy-banner',
        class FzyBanner extends HTMLElement {
            constructor() {
                super();
                let that = this;
                that.sid = 'fzy-banner-'+(Date.now());
                that.interval = that.getAttribute('interval') || 3000;
                that.anim = that.getAttribute('anim');
                that.width = that.getAttribute('width') || 'auto';
                that.height = that.getAttribute('height') || '280px';
                that.autoplay = that.getAttribute('autoplay')==='false'?false:(that.getAttribute('autoplay') || true);
                that.arrow = that.getAttribute('arrow') || 'hover';
                that.indicator = that.getAttribute('indicator') || 'inside';
                that.target = that.getAttribute('target');
                const _temp = getChildren(that, '_temp');
                let _innerHTML = _temp.innerHTML.trim().replace(/^(<br>)|(<br>)$/g, '');
                let content = '';
                _innerHTML.replace(/{banner-item title="([\s\S]*?)" image="([\s\S]*?)" jumpUrl="([\s\S]*?)"\/}/g, function ($0, $1, $2, $3) {
                    content += `<div><img src="${$2.trim().replace(/^(<br>)|(<br>)$/g,'')}"/><a class="fzy-banner-title" target="${that.target}" href="${$3?$3:'javascript:;'}">${$1.trim().replace(/^(<br>)|(<br>)$/g, '')}</a></div>`;
                });

                let htmlStr = `<div class="layui-carousel" id="${that.sid}"><div carousel-item>${content}</div></div>`;
                that.innerHTML = htmlStr;
                that.render();
                that.connectedCallback();
            }
            connectedCallback() {
                let that = this;
                if(layui && layui.carousel){
                    layui.use('carousel',function(){
                        var carousel = layui.carousel;
                        carousel.render({
                            elem: `#${that.sid}`,
                            anim: that.anim,
                            width: that.width,
                            height: that.height,
                            autoplay: that.autoplay,
                            arrow: that.arrow,
                            indicator: that.indicator,
                        });
                    });
                }else{
                    this.innerHTML = '没有引入layui的轮播组件';
                }
            }
            render(){}
        }
    );

    customElements.define(
        'fzy-alert',
        class FzyAlert extends HTMLElement {
            constructor() {
                super();
                const _temp = getChildren(this, '_temp');
                this.options = {
                    type: /^success$|^info$|^warning$|^error$/.test(this.getAttribute('type')) ? this.getAttribute('type') : 'info',
                    content: _temp.innerHTML.trim().replace(/^(<br>)|(<br>)$/g, '') || '警告提示'
                };
                const htmlStr = `
                <div class="fzy_alert ${this.options.type}">
                    ${this.options.content}
                </div>
            `;
                if (getChildren(this, '_content')) {
                    getChildren(this, '_content').innerHTML = htmlStr;
                } else {
                    const span = document.createElement('span');
                    span.style.display = 'block';
                    span.className = '_content';
                    span.innerHTML = htmlStr;
                    this.appendChild(span);
                }
            }
        }
    );

    customElements.define(
        'fzy-timeline',
        class FzyTimeline extends HTMLElement {
            constructor() {
                super();
                const _temp = getChildren(this, '_temp');
                let _innerHTML = _temp.innerHTML.trim().replace(/^(<br>)|(<br>)$/g, '');
                let content = '';
                _innerHTML.replace(/{timeline-item([^}]*)}([\s\S]*?){\/timeline-item}/g, function ($0, $1, $2) {
                    content += `
                <div class="fzy_timeline__item">
                    <div class="fzy_timeline__item-tail"></div>
                    <div class="fzy_timeline__item-circle" ${$1}></div>
                    <div class="fzy_timeline__item-content">${$2.trim().replace(/^(<br>)|(<br>)$/g, '')}</div>
                </div>
            `;
                });
                let htmlStr = `<div class="fzy_timeline">${content}</div>`;
                if (getChildren(this, '_content')) {
                    getChildren(this, '_content').innerHTML = htmlStr;
                } else {
                    const span = document.createElement('span');
                    span.className = '_content';
                    span.style.display = 'block';
                    span.innerHTML = htmlStr;
                    this.appendChild(span);
                }
                this.querySelectorAll('.fzy_timeline__item-circle').forEach((item, index) => {
                    const color = item.getAttribute('color') || '#19be6b';
                    item.style.borderColor = color;
                });
            }
        }
    );

    customElements.define(
        'fzy-collapse',
        class FzyCollapse extends HTMLElement {
            constructor() {
                super();
                let accordion = this.getAttribute('accordion');
                const _temp = getChildren(this, '_temp');
                let _innerHTML = _temp.innerHTML.trim().replace(/^(<br>)|(<br>)$/g, '');
                let content = '';
                _innerHTML.replace(/{collapse-item([^}]*)}([\s\S]*?){\/collapse-item}/g, function ($0, $1, $2) {
                    content += `
                <div class="fzy_collapse__item" ${$1}>
                    <div class="fzy_collapse__item-head">
                        <div class="fzy_collapse__item-head--label"></div>
                        <svg class="fzy_collapse__item-head--icon" xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24"><path d="M7.406 7.828L12 12.422l4.594-4.594L18 9.234l-6 6-6-6z"/></svg>
                    </div>
                    <div class="fzy_collapse__item-wrapper">
                        <div class="fzy_collapse__item-wrapper--content">${$2.trim().replace(/^(<br>)|(<br>)$/g, '')}</div>
                    </div>
                </div>
            `;
                });
                let htmlStr = `<div class="fzy_collapse">${content}</div>`;
                if (getChildren(this, '_content')) {
                    getChildren(this, '_content').innerHTML = htmlStr;
                } else {
                    const span = document.createElement('span');
                    span.className = '_content';
                    span.style.display = 'block';
                    span.innerHTML = htmlStr;
                    this.appendChild(span);
                }
                if(!accordion) {
                    this.querySelectorAll('.fzy_collapse__item').forEach(item => {
                        const label = item.getAttribute('label') || '折叠标题';
                        const head = getChildren(item, 'fzy_collapse__item-head');
                        const headLabel = getChildren(head, 'fzy_collapse__item-head--label');
                        headLabel.innerHTML = label;
                        const wrapper = getChildren(item, 'fzy_collapse__item-wrapper');
                        const content = getChildren(wrapper, 'fzy_collapse__item-wrapper--content');
                        const open = item.getAttribute('open');
                        if (open !== null) {
                            item.classList.add('active');
                            wrapper.style.maxHeight = 'none';
                        }
                        head.addEventListener('click', () => {
                            wrapper.style.maxHeight = content.offsetHeight + 'px';
                            let timer = setTimeout(() => {
                                if (item.classList.contains('active')) {
                                    item.classList.remove('active');
                                    wrapper.style.maxHeight = 0;
                                } else {
                                    item.classList.add('active');
                                    wrapper.style.maxHeight = content.offsetHeight + 'px';
                                }
                                clearTimeout(timer);
                            }, 30);
                        });
                    });
                }else{
                    this.querySelectorAll('.fzy_collapse__item').forEach(item => {
                        const label = item.getAttribute('label') || '折叠标题';
                        const head = getChildren(item, 'fzy_collapse__item-head');
                        const headLabel = getChildren(head, 'fzy_collapse__item-head--label');
                        headLabel.innerHTML = label;
                        const wrapper = getChildren(item, 'fzy_collapse__item-wrapper');
                        const content = getChildren(wrapper, 'fzy_collapse__item-wrapper--content');
                        const open = item.getAttribute('open');
                        if (open !== null) {
                            item.classList.add('active');
                            wrapper.style.maxHeight = 'none';
                        }
                        head.addEventListener('click', () => {
                            wrapper.style.maxHeight = content.offsetHeight + 'px';
                            let timer = setTimeout(() => {
                                document.querySelectorAll('.fzy_collapse__item').forEach(it => {
                                    const wrapperIt = getChildren(it, 'fzy_collapse__item-wrapper');
                                    it.classList.remove('active');
                                    wrapperIt.style.maxHeight = 0;
                                });
                                item.classList.add('active');
                                wrapper.style.maxHeight = content.offsetHeight + 'px';
                                clearTimeout(timer);
                            }, 30);
                        });
                    })
                }
            }
        }
    );

    customElements.define(
        'fzy-dplayer',
        class FzyDplayer extends HTMLElement {
            constructor() {
                super();
                this.options = {
                    src: this.getAttribute('src'),
                    player: this.getAttribute('player'),
                    width:this.getAttribute('width') || '100%',
                    height:this.getAttribute('height') || '350px'
                };
                this.render();
            }

            render() {
                if (this.options.src) {
                    // 如果url等于已经解码的url，说明url未编码
                    if (this.options.src == decodeURIComponent(this.options.src)) {
                        // 对url进行编码
                        this.options.src = encodeURIComponent(this.options.src);
                    }
                    this.innerHTML = `<iframe allowfullscreen="true" src="${this.options.player + this.options.src}"></iframe>`;
                } else {
                    this.innerHTML = '播放地址未填写！';
                }
            }
        }
    );

    customElements.define(
        'fzy-bilibili',
        class FzyBilibili extends HTMLElement {
            constructor() {
                super();
                this.bvid = this.getAttribute('bvid');
                this.page = Object.is(Number(this.getAttribute('page')), NaN) ? 1 : this.getAttribute('page');
                this.width = this.getAttribute('width') || '100%';
                this.height = this.getAttribute('height') || '350px';
                if (this.bvid)this.innerHTML = `<iframe allowfullscreen="true" src="//player.bilibili.com/player.html?isOutside=true&bvid=${this.bvid}&p=${this.page}"></iframe>`;
                else this.innerHTML = 'Bvid未填写！';
            }
        }
    );

    customElements.define(
        'fzy-tabs',
        class FzyTabs extends HTMLElement {
            constructor() {
                super();
                const _temp = getChildren(this, '_temp');
                let _innerHTML = _temp.innerHTML.trim().replace(/^(<br>)|(<br>)$/g, '');
                let navs = '';
                let contents = '';
                _innerHTML.replace(/{tabs-pane([^}]*)}([\s\S]*?){\/tabs-pane}/g, function ($0, $1, $2) {
                    navs += `<div class="fzy_tabs__head-item" ${$1}></div>`;
                    contents += `<div style="display: none" class="fzy_tabs__body-item" ${$1}>${$2.trim().replace(/^(<br>)|(<br>)$/g, '')}</div>`;
                });
                let htmlStr = `
            <div class="fzy_tabs">
                <div class="fzy_tabs__head">${navs}</div>
                <div class="fzy_tabs__body">${contents}</div>
            </div>
        `;
                if (getChildren(this, '_content')) {
                    getChildren(this, '_content').innerHTML = htmlStr;
                } else {
                    const span = document.createElement('span');
                    span.className = '_content';
                    span.style.display = 'block';
                    span.innerHTML = htmlStr;
                    this.appendChild(span);
                }
                this.querySelectorAll('.fzy_tabs__head-item').forEach((item, index) => {
                    const label = item.getAttribute('label');
                    item.innerHTML = label;
                    item.addEventListener('click', () => {
                        this.querySelectorAll('.fzy_tabs__head-item').forEach(_item => _item.classList.remove('active'));
                        this.querySelectorAll('.fzy_tabs__body-item').forEach(_item => (_item.style.display = 'none'));
                        if (this.querySelector(`.fzy_tabs__body-item[label="${label}"]`)) {
                            this.querySelector(`.fzy_tabs__body-item[label="${label}"]`).style.display = 'block';
                        }
                        item.classList.add('active');
                    });
                    if (index === 0) item.click();
                });
            }
        }
    );

    customElements.define(
        'fzy-gird',
        class FzyGird extends HTMLElement {
            constructor() {
                super();
                this.options = {
                    column: isNaN(this.getAttribute('column')) || !this.getAttribute('column') ? 3 : this.getAttribute('column'),
                    gap: isNaN(this.getAttribute('gap')) || !this.getAttribute('gap') ? 15 : this.getAttribute('gap')
                };
                const _temp = getChildren(this, '_temp');
                let _innerHTML = _temp.innerHTML.trim().replace(/^(<br>)|(<br>)$/g, '');
                let contents = '';
                _innerHTML.replace(/{gird-item}([\s\S]*?){\/gird-item}/g, function ($0, $1) {
                    contents += `<div class="fzy_gird__item">${$1.trim().replace(/^(<br>)|(<br>)$/g, '')}</div>`;
                });
                let htmlStr = `<div class="fzy_gird" style="gap: ${this.options.gap}px; grid-template-columns: repeat(${this.options.column}, 1fr);">${contents}</div>`;
                if (getChildren(this, '_content')) {
                    getChildren(this, '_content').innerHTML = htmlStr;
                } else {
                    const span = document.createElement('span');
                    span.className = '_content';
                    span.style.display = 'block';
                    span.innerHTML = htmlStr;
                    this.appendChild(span);
                }
            }
        }
    );

    customElements.define(
        'fzy-copy',
        class FzyCopy extends HTMLElement {
            constructor() {
                super();
                this.options = {
                    showText: this.getAttribute('showText') || '点击复制',
                    copyText: this.getAttribute('copyText') || '默认文本'
                };
                this.innerHTML = `<span class="fzy_copy" style="cursor: pointer; user-select: none;">${this.options.showText}</span>`;
                const button = getChildren(this, 'fzy_copy');
                if (typeof ClipboardJS !== 'undefined' && typeof layui.layer !== 'undefined') {
                    new ClipboardJS(button, {text: () => this.options.copyText}).on('success', () => layui.layer.msg('复制成功！'));
                } else {
                    button.addEventListener('click', () => {
                        navigator.clipboard.writeText(this.options.copyText)
                            .then(() => {
                                if(typeof layui.layer!=='undefined'){
                                    layui.layer.msg('复制成功！')
                                }else{
                                    alert('复制成功！');
                                }
                            }).catch(error=>{
                            console.error('复制失败:', error);
                        });
                    });
                }
            }
        }
    );
// });

